import { Button, Dialog, Form, Input } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";
import { useState } from "react";
import { bindBatteryApi } from "../../../../servers/servers";

const BangDingDianChiForm = ({ data, onFinish }) => {
  const [form] = Form.useForm();

  const [open, setOpen] = useState(false);

  const WrapperStyle = {
    display: "flex",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
  };

  return (
    <>
      <div className="binding_list_box">
        <div className="dianchiname">{data?.batteryId ?? "空"}</div>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            background: "#fff",
          }}
        >
          <Form
            form={form}
            onFinish={async (values) => {
              const { msg = "" } = await bindBatteryApi({
                ...values,
                battery: data?.batteryId,
              });

              if (msg === "SUCCESS") {
                Taro.showToast({
                  title: "绑定成功",
                  icon: "none",
                  duration: 2000,
                });

                setOpen(false);

                onFinish();
              } else {
                Taro.showModal({
                  title: "提示",
                  content: msg ?? "绑定失败",

                  showCancel: false,
                });
              }
            }}
            style={{
              width: "80%",
            }}
          >
            <Form.Item name="mobile">
              <Input
                style={{
                  border: "1px solid #F2F4F8",
                  paddingLeft: 12,
                  borderRadius: 6,
                  backgroundColor: "#F2F4F8",
                  height: "100rpx",
                }}
                placeholder="请输入要绑定的手机号"
                type="number"
                size=""
              ></Input>
            </Form.Item>
          </Form>
          <div
            className="right"
            style={{ display: "flex", alignItems: "center" }}
          >
            <Button
              type="primary"
              onClick={() => {
                if (!form.getFieldValue("mobile")) {
                  return Taro.showToast({
                    title: "请输入要绑定的手机号",
                    icon: "none",
                    duration: 2000,
                  });
                }
                setOpen(true);
              }}
              style={{
                width: 120,
              }}
            >
              绑定
            </Button>
          </div>
        </div>
      </div>

      <Dialog
        title="确定要绑定该用户吗？"
        visible={open}
        onConfirm={async () => {
          try {
            form.submit();
          } catch (error) {}
        }}
        onCancel={() => {
          setOpen(false);
        }}
      >
        <div>
          <span>电池编码：{data?.batteryId}</span>
          <span>绑定的手机号：{form.getFieldValue("mobile")}</span>
        </div>
      </Dialog>
    </>
  );
};

export default BangDingDianChiForm;
